<template>
  <main>
    当前登录人：<ElInput v-model="uid" style="width: 100px"></ElInput>
    <ElButton type="primary" @click="begin">发起连接</ElButton>
    <ElButton @click="stop">断开连接</ElButton>
    <el-divider></el-divider>
    频道号：<ElInput v-model="channelId" style="width: 100px"></ElInput>
    <ElButton type="primary" @click="enter">订阅频道/加群/进入直播间</ElButton>{{ currentChannelId }}
    <ElButton @click="quit">取消订阅频道</ElButton>
    <el-divider></el-divider>
    <ElInput style="width: 200px" v-model="chatMessage.content"></ElInput>
    <ElButton type="primary" @click="sendMsg"> 发送消息 </ElButton>
    <ElButton type="primary" @click="sendMsg2"> 发送持久化消息 </ElButton>
    <el-divider></el-divider>
    <div>
      <template v-for="(e, i) in history" :key="i">
        <div>{{ e }}</div>
      </template>
    </div>
  </main>
</template>

<script lang="js">
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from
import Stomp from 'stompjs'
export default {
  name: "HomeView",
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      uid:"",
      channelId:"001",
      subId:"",
      currentChannelId:'',
      client:null,
      chatMessage:{
        content:"",
        groupId:'',
        sender:'',
        msgTime:null
      },
      history:[]
    };
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    begin(){
      const ws = new WebSocket("http://localhost:8080/chatting")
      const client = Stomp.over(ws)
      client.connect({},(message)=>{
          console.log("成功链接到",client)
        
      })
      this.client = client;
    },
    stop(){
      if(!(this.client && this.client.connected)){
        this.$message.warning("目前没有开启连接")
        return ;
      }
      this.client.disconnect(()=>{
        console.log("断开连接")
      });
    }
    ,
    enter(){
      if(!(this.client && this.client.connected)){
        this.$message.warning("目前没有开启连接")
        return ;
      }
      if(this.subId && this.currentChannelId ){
        this.$message.warning("目前已有订阅频道,请退出后重新订阅")
        return;
      }
      const sub =  this.client.subscribe("/channel/"+this.channelId,(message)=>{
        console.log("收到服务端发来的消息 ",message)
        const chatMessage = JSON.parse(message.body)
         this.history.push(chatMessage.sender+" 说 "+chatMessage.content)
      })
      console.log(sub)
      this.subId = sub.id;
      this.currentChannelId = this.channelId
    },
    quit(){
      if(!(this.client && this.client.connected)){
        this.$message.warning("目前没有开启连接")
        return ;
      }
      if(!(this.subId || this.currentChannelId )){
        this.$message.warning("目前没有已订阅频道")
        return;
      }
      this.client.unsubscribe(this.subId);
      this.subId='';
      this.currentChannelId=''

    },
    sendMsg(){
      if(!(this.client && this.client.connected)){
        this.$message.warning("目前没有开启连接")
        return ;
      }
      if(!(this.subId || this.currentChannelId )){
        this.$message.warning("目前没有已订阅频道")
        return;
      }
      this.chatMessage.sender="zhangsan";
      this.chatMessage.groupId=this.channelId;
      this.client.send("/channel/"+this.channelId,
      {},JSON.stringify(this.chatMessage))
    },
    sendMsg2(){
      this.chatMessage.groupId=this.channelId;
      this.client.send("/chatMessage/insert",{},JSON.stringify(this.chatMessage))
    }
  },
  watch: {
    // sampleP(n, o) {},
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
